{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "=========\n",
    "Bar with negative stack: http://www.highcharts.com/demo/bar-negative-stack\n",
    "----------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:550px;height:400px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {&quot;text&quot;: &quot;Source: www.census.gov&quot;}, &quot;xAxis&quot;: [{&quot;reversed&quot;: false, &quot;labels&quot;: {&quot;step&quot;: 1}, &quot;categories&quot;: [&quot;0-4&quot;, &quot;5-9&quot;, &quot;10-14&quot;, &quot;15-19&quot;, &quot;20-24&quot;, &quot;25-29&quot;, &quot;30-34&quot;, &quot;35-39&quot;, &quot;40-44&quot;, &quot;45-49&quot;, &quot;50-54&quot;, &quot;55-59&quot;, &quot;60-64&quot;, &quot;65-69&quot;, &quot;70-74&quot;, &quot;75-79&quot;, &quot;80-84&quot;, &quot;85-89&quot;, &quot;90-94&quot;, &quot;95-99&quot;, &quot;100 + &quot;]}, {&quot;linkedTo&quot;: 0, &quot;reversed&quot;: false, &quot;labels&quot;: {&quot;step&quot;: 1}, &quot;categories&quot;: [&quot;0-4&quot;, &quot;5-9&quot;, &quot;10-14&quot;, &quot;15-19&quot;, &quot;20-24&quot;, &quot;25-29&quot;, &quot;30-34&quot;, &quot;35-39&quot;, &quot;40-44&quot;, &quot;45-49&quot;, &quot;50-54&quot;, &quot;55-59&quot;, &quot;60-64&quot;, &quot;65-69&quot;, &quot;70-74&quot;, &quot;75-79&quot;, &quot;80-84&quot;, &quot;85-89&quot;, &quot;90-94&quot;, &quot;95-99&quot;, &quot;100 + &quot;], &quot;opposite&quot;: true}], &quot;title&quot;: {&quot;text&quot;: &quot;Population pyramid for Germany, midyear 2010&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;max&quot;: 4000000, &quot;labels&quot;: {&quot;formatter&quot;: function () {                                    return (Math.abs(this.value) / 1000000) + &#x27;M&#x27;;                                }}, &quot;min&quot;: -4000000, &quot;title&quot;: {&quot;text&quot;: null}}, &quot;chart&quot;: {&quot;width&quot;: 550, &quot;renderTo&quot;: &quot;container&quot;, &quot;type&quot;: &quot;bar&quot;, &quot;height&quot;: 400}, &quot;tooltip&quot;: {&quot;formatter&quot;: function () {                            return &#x27;&lt;b&gt;&#x27; + this.series.name + &#x27;, age &#x27; + this.point.category + &#x27;&lt;/b&gt;&lt;br/&gt;&#x27; +                                &#x27;Population: &#x27; + Highcharts.numberFormat(Math.abs(this.point.y), 0);                        }}, &quot;plotOptions&quot;: {&quot;series&quot;: {&quot;stacking&quot;: &quot;normal&quot;}}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;data&quot;: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768, -2176300, -1329968, -836804, -354784, -90569, -28367, -3878], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Male&quot;}, {&quot;data&quot;: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874, 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638, 1447162, 1005011, 330870, 130632, 21208], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Female&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=400 width=550></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7f7e9c01e0d0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width=550, height=400)\n",
    "\n",
    "categories = ['0-4', '5-9', '10-14', '15-19',\n",
    "            '20-24', '25-29', '30-34', '35-39', '40-44',\n",
    "            '45-49', '50-54', '55-59', '60-64', '65-69',\n",
    "            '70-74', '75-79', '80-84', '85-89', '90-94',\n",
    "            '95-99', '100 + ']\n",
    "\n",
    "options = {\n",
    "\t'chart': {\n",
    "        'type': 'bar'\n",
    "    },\n",
    "    'title': {\n",
    "        'text': 'Population pyramid for Germany, midyear 2010'\n",
    "    },\n",
    "    'subtitle': {\n",
    "        'text': 'Source: www.census.gov'\n",
    "    },\n",
    "    'xAxis': [{\n",
    "        'categories': categories,\n",
    "        'reversed': False,\n",
    "        'labels': {\n",
    "            'step': 1\n",
    "        }\n",
    "    }, { \n",
    "        'opposite': True,\n",
    "        'reversed': False,\n",
    "        'categories': categories,\n",
    "        'linkedTo': 0,\n",
    "        'labels': {\n",
    "            'step': 1\n",
    "        }\n",
    "    }],\n",
    "    'yAxis': {\n",
    "        'title': {\n",
    "            'text': None\n",
    "        },\n",
    "        'labels': {\n",
    "            'formatter': \"function () {\\\n",
    "                                    return (Math.abs(this.value) / 1000000) + 'M';\\\n",
    "                                }\"\n",
    "        },\n",
    "        'min': -4000000,\n",
    "        'max': 4000000\n",
    "    },\n",
    "\n",
    "    'plotOptions': {\n",
    "        'series': {\n",
    "            'stacking': 'normal'\n",
    "        }\n",
    "    },\n",
    "\n",
    "    'tooltip': {\n",
    "        'formatter': \"function () {\\\n",
    "                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +\\\n",
    "                                'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);\\\n",
    "                        }\"\n",
    "    },\n",
    "}\n",
    "\n",
    "data_male = [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,\n",
    "                    -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,\n",
    "                    -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]\n",
    "\n",
    "data_female = [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,\n",
    "                    3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,\n",
    "                    1447162, 1005011, 330870, 130632, 21208]\n",
    "\n",
    "H.set_dict_options(options)\n",
    "H.add_data_set(data_male, 'bar', 'Male')\n",
    "H.add_data_set(data_female, 'bar', 'Female')\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
